<!-- 车辆管理 -->
<template>
  <!-- 全部 -->
    <div class="vehicle">
      <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>后勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
          <!-- 头部
          <div class="vehicleHend">
              <p><strong>位置:</strong>综合管理>车辆管理</p>
          </div> -->
          <!-- 内容 -->
          <div class="vehicleContent">
             <ul >
                 <li v-for="item in car" :key="item.id" @click="clicl(item.id)" :class='item.id==clicid?"cor":"" ' >{{item.content}}</li>
             </ul>
             <!-- 车辆查询 -->
             <div v-show="clicid==0" class="vehicleContentOne">
                 <!-- 左边 -->
                  <div class="vehicleContentOne_left">
                    <!-- 搜索 -->
                       <p>车辆搜索</p>
                       <ul>
                           <li class="vehicleContentOne_left_left">车牌号：</li>
                           <li class="vehicleContentOne_left_right">
                            <input type="text" placeholder="请输入内容" v-model="CarNumber">
                            </li>
                           <li class="vehicleContentOne_left_left">车主名：</li>
                           <li class="vehicleContentOne_left_right">
                            <input type="text" placeholder="请输入内容" v-model="UserName">
                            </li>
                           <li class="vehicleContentOne_left_left">车辆性质：</li>
                           <li class="vehicleContentOne_left_right">
                            <select  @change="getVal($event)" >
                              <option  value="">请选择</option>
                               <option value="公有">公有</option>
                                <option value="私有">私有</option>
                            </select>
                            </li>
                           <li class="vehicleContentOne_left_left">所属部门：</li>
                           <li class="vehicleContentOne_left_right">
                            <select  @change="getVal1($event)" >
                              <option   value="">请选择</option>
                               <option value="人事部">人事部</option>
                                <option value="行政部">行政部</option>
                                 <option value="后勤部">后勤部</option>
                            </select>
                            </li>
                           <li class="vehicleContentOne_left_left">车辆描述：</li>
                           <li class="vehicleContentOne_left_right">
                            <input type="text"  placeholder="请输入内容" v-model="CarDescript">
                            </li>
                       </ul>
                       <p><button @click="query">搜索</button></p>
                        <table>
                            <tr>
                                <th>车牌号</th>
                                <th>车辆描述</th>
                                <th>车辆性质</th>
                                <th>车主名</th>
                                <th>所属部门</th>
                            </tr>
                            <tr v-for='item in selectCar' :key='item.id'>
                                <td>{{item.CarNumber}}</td>
                                <td>{{item.CarDescript}}</td>
                                <td>{{item.CarXz}}</td>
                                <td>{{item.UserName}}</td>
                                <td>{{item.Department}}</td>
                              </tr>
                         </table>
                        <div> 共{{cont}}条 </div>       
                  </div>
                  <!-- 右边 -->
                  <div class="vehicleContentOne_right">
                    <div class="vehicleContentOne_rightA">
                      <template>
                       <el-carousel :interval="4000" type="card" height="400px">
                        <el-carousel-item v-for="item in url" :key="item.id">
                         <div class="medium"><img :src="item.url" /></div>
                        </el-carousel-item>
                        </el-carousel>
                       </template>
                     </div>
                  </div>
             </div>
             <!-- 车辆注册 -->
             <div v-show="clicid==1" class="vehicleContentTwo">
                 <!-- 左边 -->
                  <div class="vehicleContentTwo_left">
                     
                       <p>车辆注册</p>
                       <ul>
                           <li class="vehicleContentTwo_left_left">车牌号：</li>
                           <li class="vehicleContentTwo_left_right">
                            <input type="text" placeholder="请输入内容" v-model="CarNumber1">
                            </li>
                           <li class="vehicleContentTwo_left_left">员工工号：</li>
                           <li class="vehicleContentTwo_left_right">
                            <input type="text" placeholder="请输入内容" v-model="UserGH">
                            </li>
                           <li class="vehicleContentTwo_left_left">车辆性质：</li>
                           <li class="vehicleContentTwo_left_right">
                            <select @change="getVal2($event)" >
                              <option  value="">请选择</option>
                               <option value="公有">公有</option>
                                <option value="私有">私有</option>
                            </select>
                            </li>
                           <li class="vehicleContentTwo_left_left">所属部门：</li>
                           <li class="vehicleContentTwo_left_right">
                            <select placeholder="请选择" @change="getVal3($event)" >
                              <option  value="">请选择</option>
                               <option value="2">人事部</option>
                                <option value="1">行政部</option>
                                 <option value="3">后勤部</option>
                            </select>
                            </li>
                           <li class="vehicleContentTwo_left_left">车辆描述：</li>
                           <li class="vehicleContentTwo_left_right">
                            <input placeholder="请输入内容" type="text" v-model="CarDescript1">
                            </li>
                       </ul>
                       <p><button @click="querys">注册</button></p>
                       <!-- 统计表 -->
                          <!-- <div :style="{height:'345px'}">
                           <ve-line :data="chartData" ></ve-line>
                           </div> -->
                  </div>
                  <!-- 右边 -->
                  <!-- <div class="vehicleContentTwo_right">
                    <div class="vehicleContentTwo_right_One">
                          <div class="block" v-for='item in selectCar' :key='item.id'>
                               <el-timeline>
                                  <el-timeline-item :timestamp="item.Cartime" placement="top">
                                    <el-card>
                                      <h4 class="block_one">注册成功</h4>
                                      <p class="block_one">{{item.UserName}} {{item.CarNumber}} {{item.CarDescript}} {{item.CarXz}} {{item.Department}} {{item.Cartime}}</p>
                                    </el-card>
                                  </el-timeline-item>
                             </el-timeline>
                          </div>
                          </div>
                  </div> -->
             </div>
        </div>
    </div>
</template>

<script>
// import Vueline from "v-charts/lib/line.common.js";
    export default {
      // components:{
      //   Vueline
      // },
        data() {
            return {
               CarNumber:'',//车牌号
               CarDescript:'',//车辆描述
               UserName:'',//车主名
               CarXz:'',//车辆性质
               Department:'',//车辆部门
                CarNumber1:'',//车牌号
               CarDescript1:'',//车辆描述
               UserGH:'',//工号名
               CarXz1:'',//车辆性质
               Department1:'',//车辆部门
               clicid:0,
               hours:'',
               car:[{id:0,content:'车辆查询'},
               {id:1,content:'车辆注册'}],
               url:[{id:0,url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.redocn.com%2Ftupian%2F20160427%2Fbenchihaohuapaochetupian_6230849.jpg&refer=http%3A%2F%2Fimg3.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663383604&t=3f3b7b190e85cab59ac38beed2c15dce'},
               {id:0,url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3-tt.byteimg.com%2Forigin%2Fpgc-image%2Fb1be2303f9aa4788884af06ca8835aec%3Ffrom%3Dpc&refer=http%3A%2F%2Fp3-tt.byteimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663383605&t=4847919ec805e25daacf6528705a3ee9'},
               {id:0,url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic173.nipic.com%2Ffile%2F20180715%2F4230307_085219186081_2.jpg&refer=http%3A%2F%2Fpic173.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663383769&t=4dc0549e3d6e2e17c41bd796fc6a955e'},
               {id:0,url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.tt98.com%2Fd%2Ffile%2Fpic%2F201806011237305%2F5a5330accb705.jpg&refer=http%3A%2F%2Fimg.tt98.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663383922&t=b50f1621c97e138c51ac8f05ef6b0e15'},
               {id:0,url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fforum.xitek.com%2F200804%2F5477%2F547742%2F547742_1209538707.jpg&refer=http%3A%2F%2Fforum.xitek.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663383930&t=ecf0e466b446001350e5b13aa040d91c'},],
              selectCar:[],
              selectCar1:[],


              //  chartData: {
              //      columns: ['日期', '人事部注册车辆', '行政部注册车辆', '后勤部注册车辆'],
              //      rows: [
              //        { '日期': '2022/4/20', '人事部注册车辆': 1, '行政部注册车辆': 0, '后勤部注册车辆': 0 },
              //        { '日期': '2022/6/10', '人事部注册车辆': 1, '行政部注册车辆': 1, '后勤部注册车辆': 0 },
              //        { '日期': '2022/7/10', '人事部注册车辆': 2, '行政部注册车辆': 1, '后勤部注册车辆': 0 }
              //            ]
              //    }
            } 
        },
        
        methods: {
          time(){
             
          },
            // 控制车辆查询和车辆注册的节流阀
            clicl(id){
             this.clicid=id
            //  console.log(this.clicid);
            },
            // 拿到车辆性质
            getVal(e){
                // console.log(e.target.value,this.CarNumber);
              this.CarXz=e.target.value
             },
            //  拿到车辆所属部门
              getVal1(e){
                // console.log(e.target.value);
               this.Department=e.target.value
             },
               // 拿到车辆性质
            getVal2(e){
                // console.log(e.target.value,this.CarNumber);
              this.CarXz1=e.target.value
             },
            //  拿到车辆所属部门
              getVal3(e){
                // console.log(e.target.value);
               this.Department1=e.target.value
             },
            // 查询汽车的方法

            query(){
                this.$axios({
                    url:'http://localhost:9090/selectCar',
                    method:"post",//get请求方式
                    data:{carobj:{
                       CarNumber:this.CarNumber,
                       CarDescript:this.CarDescript,
                       UserName:this.UserName,
                       CarXz:this.CarXz,
                       Department:this.Department
                    }}
                }).then(res=>{
                    // console.log(res.data.data);
                    this.selectCar1=res.data.data
                    this.selectCar=this.selectCar1
                    // console.log(this.selectCar);
                })
            },
            // 注册车辆的接口
            querys(){
               let hours=new Date().toLocaleDateString()
               if(this.UserGH!=''&&this.CarNumber1!=''&&this.CarDescript1!=''&&this.CarXz1!=''&&this.Department1!=''){
                  this.$axios({
                    url:'http://localhost:9090/insertCar',
                    method:"post",//get请求方式
                    data:{carobj:{
                       UserGh:this.UserGH,
                       CarNumber:this.CarNumber1,
                       CarDescript:this.CarDescript1,
                       CarXz:this.CarXz1,
                       DepartmentId:this.Department1,
                       Cartime:hours
                    }}
                }).then(res=>{
                  this.UserGH=''
                  this.CarNumber1=''
                  this.CarDescript1=''
                  this.CarXz1=''
                })
                 this.query()
               }
            },

        },
        // 计算属性
        computed:{
          cont(){
            return this.selectCar.length
          }
        },
        // 生命周期挂载后
        mounted() { 
                
                  // 拿汽车数据
                this.$axios({
                    url:'http://localhost:9090/selectCar',
                    method:"post",//get请求方式
                    data:{carobj:{
                        CarNumber:'',
                       CarDescript:'',
                       UserName:'',
                       CarXz:'',
                       Department:''
                    }}
                }).then(res=>{
                    this.selectCar1=res.data.data
                    this.selectCar=this.selectCar1 
                    // this.chartData.rows=res.data.data
                   
                })
           
        }
    }
</script>
   
<style>
*{
  padding: 0;
  margin: 0;
}
/* 全部 */
   .vehicle{
    width: 99%;
    height:100%;
    background: #fff;
    padding: 20px 0 0 10px;
    /* border: 1px solid #f00; */
   }
   /* 头部 */
   .vehicleHend{
    width: 100%;
    height: 10%;
    line-height: 52px;
    text-align: left;
     background: rgb(232, 239, 243);
     /* border: 1px solid #f00; */
   }
   .vehicleHend>p{
    width:100%;
     height: 100%;
    line-height: 50px;
   margin: 0 0 0 20px;
   }
    .vehicleHend>p>strong{
        font-size: 20px;
    }
    /* 内容 */
     .vehicleContent{
      width: 100%;
      height: 100%;
      /* border: 1px solid #f00; */
     }
    .vehicleContent>ul{
        width: 100%;
        overflow: hidden;
        text-align: left;
        /* border: 1px solid #f00; */
    }
    .vehicleContent>ul>li{
        width:10%;
        height: 34px;
        list-style: none;
        margin: 10px 20px;
        border-radius: 7px;
        line-height: 34px;
        text-align: center;
        background: rgb(253, 246, 236);
        float: left;
        /* border: 1px solid #f00; */
    }
    .vehicleContent>ul>li:hover{
      background: rgb(230, 162, 60);
    }
  
    .vehicleContentOne{
        width: 100%;
        height:88%;
        overflow: hidden;
        /* border: 1px solid #0f0; */
    }
      /* 内容左边 */
      .vehicleContentOne_left{
        width: 100%;
        height: 100%;
        float: left;
         /* border: 1px solid #f00; */
      }
       .vehicleContentOne_left>p{
        height:40px;
        width: 100%;
        line-height: 40px;
        margin: 20px 0 0 0;
        /* background:rgb(222, 227, 229); */
        /* border: 1px solid #f00; */
      }
      .vehicleContentOne_left>div{
        height:40px;
        width: 90%;
        margin: auto;
        line-height: 40px;
        text-align: right;
        font-size: 17px;
        /* background:rgb(222, 227, 229); */
        /* border: 1px solid #f00; */
      }
      .vehicleContentOne_left>ul{
        width: 100%;
        list-style: none;
        overflow: hidden;
         /* border: 1px solid #f00; */
      }
      .vehicleContentOne_left>ul>li{
        height: 32px;
        line-height: 32px;
        float: left;
      }
      .vehicleContentOne_left>ul>li>input{
        width: 100%;
        height: 30px;
        font-size: 10px;
        border:1px solid rgba(0, 0, 0, 0.2);
        outline: none; 
        border-radius: 6px;
      }
      .vehicleContentOne_left>ul>li>input:hover{
        border: 1px solid rgb(230, 162, 60);
      }
       .vehicleContentOne_left>ul>li>select:hover{
        border: 1px solid rgb(230, 162, 60);
      }
      .vehicleContentOne_left>ul>li>select{
        width: 100%;
        height:30px ;
        font-size: 10px;
        border:1px solid rgba(0, 0, 0, 0.2);
        outline: none; 
         border-radius: 8px;
      }
      .vehicleContentOne_left>ul>li>select>option{
        width: 100%;
        height:30px ;
         border-radius: 6px;
      }
      .vehicleContentOne_left_left{
        text-align: right;
        font-size: 10px;
         width: 9%;
      }
       .vehicleContentOne_left_right{
        text-align: left;
        width: 10%;
      }
      .vehicleContentOne_left>p>button{
        width: 10%;
        height: 30px;
        border-radius: 15px;
         background: rgb(253, 246, 236); 
         border:none;
        outline: none; 
      }
      .vehicleContentOne_left>p>button:hover{
       background: rgb(230, 162, 60);
      }
      .vehicleContentOne_left>table{
        width: 100%;
        margin: 20px 0 0 0;
        /* border: 1px solid #f00; */
      }
      .vehicleContentOne_left>table>tr{
       height: 30px;
       font-size: 17px;
       line-height: 30px;
       text-align: center;
     }
     .vehicleContentOne_left>table>tr:hover{
      background:rgb(218, 210, 210) ;
     }
     /* 右边内容 */
     .vehicleContentOne_right{
        width: 40%;
        height: 100%;
          float: left;
          /* border: 1px solid #f00; */
     }
    .vehicleContentOne_rightA{
        width: 80%;
        height: 100%;
        margin: auto;
         /* border: 1px solid #0f0; */

    }
    .vehicleContentOne_rightA_el{
        height: 50%;
         /* border: 1px solid #00f; */
    }
    .medium{
      height: 100%;
      width: 100%;
      /* border: 1px solid #00f; */
    }
    .medium>img{
      width: 100%;
      height: 100%;
    }
    
  /* 注册样式 */
    .vehicleContentTwo{
        width: 100%;
        height: 80%;
        overflow: hidden;
        /* border: 1px solid #f00; */
    }
    /* 内容左边 */
      .vehicleContentTwo_left{
        width: 60%;
        height: 100%;
        /* border: 1px solid #f00; */
        float: left;

      }
       .vehicleContentTwo_left>p{
        height:50px;
        line-height: 50px;
        margin: 30px 0 0 0;
        /* background:rgb(222, 227, 229); */
        /* border: 1px solid #f00; */
      }
      /* .vehicleContentTwo_left>div{
        height:50px;
        width: 60%;
        margin: auto;
        line-height: 50px;
        text-align: right;
        font-size: 14px;
         border: 1px solid #f00;
          } */
      .vehicleContentTwo_left>ul{
        width: 40%;
        margin: auto;
        /* border: 1px solid #f00; */
        list-style: none;
        overflow: hidden;
      }
      .vehicleContentTwo_left>ul>li{
        width: 40%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        float: left;
      }
      .vehicleContentTwo_left_left{
        width: 40%;
        /* border: 1px solid #f00; */
         /* text-align: center; */
      }
      .vehicleContentTwo_left_right{
        width: 40%;
        /* text-align: left; */
      }
      .vehicleContentTwo_left>ul>li>input{
        width:100%;
        height: 30px;
        font-size: 10px;
         border:1px solid rgba(0, 0, 0, 0.2);
        outline: none; 
        border-radius:6px;
      }
      .vehicleContentTwo_left>ul>li>input:hover{
        border: 1px solid rgb(230, 162, 60);
      }
       .vehicleContentTwo_left>ul>li>select:hover{
        border: 1px solid rgb(230, 162, 60);
      }
      .vehicleContentTwo_left>ul>li>select{
        width: 100%;
        height:30px ;
        font-size: 10px;
         border:1px solid rgba(0, 0, 0, 0.2);
        outline: none; 
         border-radius: 6px;
      }
      .vehicleContentTwo_left>ul>li>select>option{
        width: 100%;
        height:30px ;
         border-radius: 10px;
      }
      .vehicleContentTwo_left_left{
        text-align: right;
        font-size: 10px;
         width: 9%;
      }
       .vehicleContentTwo_left_right{
        text-align: left;
        width: 10%;
      }
      .vehicleContentTwo_left>p>button{
        width: 10%;
        height: 30px;
        border-radius: 15px;
        background: rgb(253, 246, 236);
         border:none;
        outline: none; 
      }
      .vehicleContentTwo_left>p>button:hover{
       background: rgb(230, 162, 60);
      }
      /* 右边样式 */
      .vehicleContentTwo_right{
        width: 35%;
        height: 400px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 10px 0 0 10px;
        /* background: #f00; */
        text-align: left;
        float: left;
      }
      .vehicleContentTwo_right::-webkit-scrollbar {
        display: none;
    }

      .vehicleContentTwo_right_One{
        width: 99%;
        /* background: #0f0;
        border: 1px solid #000; */
      }
      .block_one{
        font-size: 10px;
        height: 20px;
        line-height: 20px;
      }
    /* 调用样式 */
    .cor{
        background: rgb(230, 162, 60) !important;
        font-weight: 700;
    }
</style>